<template>
  <view style="background-color: #f3f5f7;height: 100vh;">
    <view class="searchPP">
      <image
        @click="goBackM"
        style="width: 0.6rem; height: 1rem; padding: 0rem 0.5rem 0rem 0rem"
        src="../../style/image/cargo/leftarow.jpg"
        alt=""
      />
      <view class="searchP">
        <view class="search" :style="{ width: '100%' }">
          <u-search
            placeholder="请输入订单号"
            shape="round"
            v-model="keywordOrder"
			@search="searchOrder"
            :show-action="false"
          ></u-search>
        </view>
        <!-- <view @click="celendarM" class="celendar">
                <image :style="{ width:'1.1rem',height:'1.1rem', margin:'0rem 0.5rem'}" src="../../style/image/stati/日历@3x.png" alt="">
                <view>2019.10.09</view>
             </view> -->
      </view>
    </view>

    <view>
      <view class="classesifyP">
        <view class="classesify">
          <view
            :class="selectIfy == 1 ? 'classesify-puc' : 'classesify-pucs'"
            @click="pucM"
          >
            本人
          </view>
          <!-- <view class="classesify-pucs" @click="pucM" v-else>代理12</view> -->

          <view class="classesify-bus" @click="busM" v-if="selectIfy === 1">
            下级
          </view>
          <view class="classesify-buss" @click="busM" v-else>下级</view>
        </view>
      </view>
    </view>

    <!-- 本人 -->

    <view v-show="selectIfy === 1">
      <view style="background-color: white">
        <u-dropdown>
          <u-dropdown-item
            v-model="value1"
            title="全部商户"
            active-color='#02af74'
			height="500"
            :options="options1"
			@change="change1"
          ></u-dropdown-item>
          <u-dropdown-item
            v-model="value2"
            title="全部设备"
            active-color='#02af74'
			height="1000"
            :options="options2"
			@change="change2"
          ></u-dropdown-item>
        </u-dropdown>
      </view>

      <view
        class="totle-price"
        style="
          font-size: 0.72rem;
          padding: 0.5rem;
          font-family: PingFang SC;
          font-weight: 300;
          color: #666666;
          display: flex;
          justify-content: center;
        "
      >
        <!-- 本人订单数:30个 -->
		本人订单数:{{repairLists.length}}个
      </view>

      <view
        style="background-color: #f3f5f7; padding: 0rem 1rem 1rem 1rem"
        class="repairListsP"
      >
        <view
          class="repairLists"
          v-for="(item, index) in repairLists"
          :key="index"
        >
          <view  @click="orderDetailedM(item.id)" class="repairLists-child">
            <view class="repairLists-top">
              <view style="display: flex; align-items: center">
                <image
                  style="width: 1rem; ;height:1rem; margin-right: 0.3rem"
                  src="../../style/image/order/charge.png"
                  alt=""
                />
                <view>
                  <span
                    style="
                      font-size: 0.72rem;
                      font-family: PingFang SC;
                      font-weight: 300;
                      color: #02af74;
                    "
                    >({{item.modelsName}})</span
                  >
                  <span
                    style="
                      font-size: 0.72rem;
                      font-family: PingFang SC;
                      font-weight: 300;
                    "
                    >{{item.orderSn}}</span
                  >
                </view>
              </view>

              <view>{{orderStatusString(item.orderStatus)}}</view>
            </view>

            <view class="repairLists-head">
              <view
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 0.2rem 0rem;
                "
              >
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  商户名称
                </view>
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  {{item.outShopName}}
                </view>
              </view>
              <view
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 0.2rem 0rem;
                "
              >
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  充电宝SN码
                </view>
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  {{item.bankSn}}
                </view>
              </view>
              <view
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 0.2rem 0rem;
                "
              >
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  底座SN码
                </view>
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  {{item.outSn}}
                </view>
              </view>
              <view
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 0.2rem 0rem;
                "
              >
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  租借时间
                </view>
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  {{item.rentDate}}
                </view>
              </view>
            </view>


          </view>

          <view
            :style="{
              display: 'flex',
              justifyContent: 'center',
              padding: '0.5rem',
            }"
          >		  
		  <u-modal v-model="showModel" title="结束订单" :mask-close-able="true" @confirm="confirmModel">
		  	<view class="slot-content">
		  		<view class="" style="padding-left: 15px;">
		  			<view @click="endOrderShow" class="" style="display: flex;justify-content: space-between;position: relative;align-items: center;padding: 20px 0 8px 0;">
		  				<text>操作类型</text>
		  				<input type="text" v-model="endOrderDic.name" disabled="true" placeholder="请选择" style="margin-right: 30px;text-align: right;width: 65%;"/>
						<u-icon name="arrow-right" style="position: absolute;z-index:999;color: #ccc;top: 46%;right: 10px;"></u-icon>
		  			</view>
					<view v-if="endOrderDic.name == '指定金额'" class="" style="display: flex;padding: 8px 0;border-top: 1px solid #f3f4f7;">
						<text>指定金额</text>
						<input type="number" v-model="endOrderDic.money" placeholder="请输入金额" style="text-align: right;width: 71%;"/>
					</view>
		  			<view class="" style="display: flex;padding: 8px 0;border-top: 1px solid #f3f4f7;">
		  				<text>备注</text>
		  				<input type="text" v-model="endOrderDic.description" placeholder="请输入备注" style="text-align: right;width: 83%;"/>
		  			</view>
		  		</view>
		  	</view>
		  </u-modal>
		  
            <!-- <view class="repairBtn" @click="closeOrder(item)">结束订单</view> -->
			<view class="repairBtn" @click="closeOrder(item)">结束订单</view>
          </view>
        </view>
		
		<!-- <u-loadmore v-show="loadmoreModal" :status="loadStatus" :load-text="loadText"/> -->
		<uni-load-more  @clickLoadMore="clickLoadMore"  :content-text="contentText" :status="status" ></uni-load-more>
		<!-- <u-empty style="margin-top:0rem;" v-if="repairLists.length==0" text="暂无数据" mode="data"></u-empty> -->
		
      </view>
    </view>

    <view v-show="selectIfy === 2" >

      <view style="background-color: white">

        <u-dropdown>
          <u-dropdown-item
            v-model="value3"
            title="排序"
            active-color='#02af74'
            :options="options3"
			@change="change3"
          ></u-dropdown-item>
        </u-dropdown>

      </view>

      <view
        class="totle-price"
        style="
          font-size: 0.72rem;
          padding: 0.5rem;
          font-family: PingFang SC;
          font-weight: 300;
          color: #666666;
          display: flex;
          justify-content: center;
        "
      >
        下级订单数:{{getDownNumber(lowerLevelLists)}}个
      </view>

        <view
        style="background-color: #f3f5f7; padding: 0rem 1rem 1rem 1rem"
        class="repairListsP"
      >
        <view
          class="repairLists"
          v-for="(item, index) in lowerLevelLists"
          :key="index"
        >
          <view class="repairLists-child">
            <view class="repairLists-top">
              <view style="display: flex; align-items: center">
                <image
                  style="width: 1rem;;height:1rem; margin-right: 0.3rem"
                  src="../../style/image/order/charge.png"
                  alt=""
                />
                <view>
                  <span
                    style="
                      font-size: 0.72rem;
                      font-family: PingFang SC;
                      font-weight: 300;
                      color: #02af74;
                    "
                    >{{item.userInfo.nickName}}</span>
                
                </view>
              </view>

              <view>{{item.orderCount}}</view>
            </view>

            <view class="repairLists-head">
              <view
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 0.2rem 0rem;
                "
              >
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  充电宝数
                </view>
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  {{getNumber("1",item.terminalCountList)}}
                </view>
              </view>
              <view
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 0.2rem 0rem;
                "
              >
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  底座数
                </view>
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  {{getNumber("2",item.terminalCountList)}}
                </view>
              </view>
             
             
            </view>


          </view>


        </view>
		<u-empty style="margin-top:0rem;" v-if="lowerLevelLists.length==0" text="暂无数据" mode="data"></u-empty>
      </view>



    </view>
	
	<u-select v-model="isEndOrder" mode="mutil-column" value-name="code" label-name="name" :list="endOrderList" @confirm="endOrderChange"></u-select>
	
  </view>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

import { userOrderListRenting } from "../../utils/uniApi";
import { subsetProxyOrderList } from "../../utils/uniApi";
import { findShopBox } from "../../utils/uniApi";
import { findTerminalBox } from "../../utils/uniApi";
import { endOrder,getOrderEnumBox } from "../../utils/uniApi";

import uniLoadMore from '../loadMore/uni-load-more.vue'

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
  components:{
  	 'uniLoadMore':uniLoadMore
  }
 
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;
  
  public showModel = false;
  public isEndOrder: any = false;//选择结束订单的问题
  public endOrderDic: any={name:'',code:'',orderId:'',orderSn:'',money:'',description:''};//结束订单 选中问题dic
  public endOrderList: any=[];//结束订单 问题list
  public selectIfy: any = 1;//被人和下级  tab切换
  public keywordOrder='';//搜索框关键字
  
  public xshopId: any = '';//下拉框选择的商户id
  public xposTypeId: any = '';//下拉框选择的设备id
  public xsort: any = 0;//下拉框选择的排序方式

  public value1 = 0;//下拉框商户id默认选择值
  public value2 = 0;//下拉框设备id默认选择值
  public value3 = 0;//下拉框排序默认选择值
  
  //加载参数
  // public loadStatus = "nomore";
  // public loadText = {
  //   loadmore: "轻轻上拉",
  //   loading: "努力加载中",
  //   nomore: "暂无更多数据",
  // };
  // public loadmoreModal = true;
  public  status='more'
  
  public  contentText={
  					contentdown: '下拉或点击查看更多',
  					contentrefresh: '加载中',
  					contentnomore: '没有更多'
  				}
  public continueTypes = true;
  public pageN: any = 1;//分页的页数

  public options1:Array<any> = [
   {label:'全部商户' , value:0 }
  ];
  public options2:Array<any> = [
    {label:'全部设备' , value:0 }
  ];
  public options3 = [
	  {
	    label: "综合",
	    value: 0,
	  },
	  {
	    label: "订单数由低到高",
	    value: 1,
	  },
	  {
	    label: "订单数由高到低",
	    value: 2,
	  },
  ];

  public repairLists = [];//本人订单
  public lowerLevelLists = [];//下级代理订单

  created() {
	  
  }
  onHide(){
  	  uni.hideLoading();
  }
  onBackPress(){
  	  uni.hideLoading();
	  uni.setStorage({
		key: "rentingTab",
		data: 1,
		success: function () {
		},
	  });
  }
  onShow(){
	  var current = uni.getStorageSync("rentingTab");
	  if(current==2){
		  this.busM()
	  }else{
		  this.orderListData(this.xshopId,this.xposTypeId,this.keywordOrder,this.pageN);
		  this.findShopBox();
		  this.findTerminalBox();
		  this.getOrderEnumBox();
	  }
  }

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
  }
  //搜索框
  searchOrder(value:any){
  	  this.keywordOrder = value;
	  this.pageN = 1
  	  this.orderListData(this.xshopId,this.xposTypeId,this.keywordOrder,this.pageN);
  }
  //下拉刷新
  onPullDownRefresh() {
      setTimeout(function () {
        uni.redirectTo({
          url: "../../pages/renting/index",
        });
        uni.stopPullDownRefresh();
      }, 1000);
  }
  //上拉加载更多
  onReachBottom() {
	  if(!this.continueTypes){
	  		  return
	  }
    this.pageN = this.pageN + 1;
    this.orderListData(this.xshopId,this.xposTypeId,this.keywordOrder,this.pageN);
  }
  clickLoadMore(){
  	  this.onReachBottom()
  }
  
  //结束订单下拉框数据
  getOrderEnumBox(){
	  let params = {
	    userId:uni.getStorageSync("userId") == ""? "": parseInt(uni.getStorageSync("userId")),
	  };
	  getOrderEnumBox(params).then((res: any) => {
	      if(res.data.code==200){
			  this.endOrderList.push(res.data.data)
	      }else{
	      
	      }
	  });
  }
  //手动取消结束订单
  closeOrder(item:any){
	  this.showModel = true
	  this.endOrderDic.orderId = item.id
	  this.endOrderDic.orderSn = item.orderSn
  }
  //结束订单问题 选择
  endOrderShow(){
	  this.isEndOrder = !this.isEndOrder
  }
  //结束订单问题 选择 确认按钮
  endOrderChange(data:any) {
  	this.isEndOrder = !this.isEndOrder
	this.endOrderDic.code = data[0].value
	this.endOrderDic.name = data[0].label
  }
  confirmModel(){
	  if(this.endOrderDic.name==''){
		  uni.showToast({
			title: '请选择结束订单类型',
			icon: 'none',
			duration: 2000
		  });
		  return
	  }
	  if(this.endOrderDic.name=='指定金额' && this.endOrderDic.money == ''){
		  uni.showToast({
			title: '请填写指定金额',
			icon: 'none',
			duration: 2000
		  });
		  return
	  }
	  uni.showLoading({
	  	title: '加载中'
	  });
	  let params = {
	  	orderSn:this.endOrderDic.orderSn,//订单号
		endOrderStatus:this.endOrderDic.code,//结束订单类型
		endOrderMoney:this.endOrderDic.money,//指定扣除金额
		description:this.endOrderDic.description,//备注
	  };
	  endOrder(params).then((res: any) => {
		  uni.hideLoading();
	      if(res.data.code==200){
			uni.showToast({
				title: '手动取消订单成功',
				icon: 'none',
				duration: 2000
			});
			this.orderListData(this.xshopId,this.xposTypeId,this.keywordOrder,this.pageN);//手动取消订单成功后刷新页面
	      }else{
			  uni.showToast({
				title: res.data.message,
				icon: 'none',
				duration: 2000
			  });
	      }
	  
	  });
  }
  //全部商户下拉框
  change1(value:any){
	  if(value == 0){
		  this.xshopId = '';
	  }else{
		  this.xshopId = value;
	  }
	  this.pageN = 1
	  this.orderListData(this.xshopId,this.xposTypeId,this.keywordOrder,this.pageN);
  	  
  }
  //全部设备下拉框
  change2(value:any){
	  if(value == 0){
		  this.xposTypeId = '';
	  }else{
		  this.xposTypeId = value;
	  }
	  this.pageN = 1
	  this.orderListData(this.xshopId,this.xposTypeId,this.keywordOrder,this.pageN);
  	  
  }
  //排序下拉框
  change3(value:any){
  	  if(value == 0){
		  this.xsort = 'orderCountAsc'
  	  }else if(value == 1){
		  this.xsort = 'orderCountDesc'
  	  }else if(value == 2){
		  this.xsort = 'orderCountAsc'
  	  }
	  this.subsetProxyOrderList(this.xsort);
  }
  
  //订单状态转换
  orderStatusString(status: string){
	  if(status == "timeout"){
		  return '超时'
	  } else if (status == "end"){
		  return '完结'
	  }else if (status == "ing"){
		  return '租赁中'
	  }
  }
  //计算充电宝或者底座的数量
  getNumber(type:any,list:any){
	  if(list.length<=0){
		  return 0;
	  }else{
		  for(let item of list) {
		  		if(item.type == '0' && type == '1'){
		  					return item.terminalCount
		  				} else if(item.type == '1' && type == '2'){
		  						return item.terminalCount
		  					}
		     }
			 return 0;
	  }
  }
  //计算下级订单的数量
  getDownNumber(list:any){
	  var number = 0
	  list.filter((item: any, index: any) => {
	  	number = number + item.orderCount
	  })
	  return number
  }
  //设备下拉选择框
  findTerminalBox(){
  	  let params = {
  	    userId:uni.getStorageSync("userId") == ""? "": parseInt(uni.getStorageSync("userId")),
  	  };
  	  
  	  findTerminalBox(params).then((res: any) => {
  	      if(res.data.code==200){
  			  if(res.data.data.length>0){
  				  for (var i = 0; i < res.data.data.length; i ++){
  					  let item = res.data.data[i];
  					  let shopItem = {label:item.sn , value:item.id }
  					  this.options2.push(shopItem);
  				  }
  			  }
  	      }else{
  	      
  	      }
  	  });
  }
  //商户下拉选择框
  findShopBox(){
	  let params = {
	    userId:uni.getStorageSync("userId") == ""? "": parseInt(uni.getStorageSync("userId")),
	  };
	  findShopBox(params).then((res: any) => {
	      if(res.data.code==200){
			  if(res.data.data.length>0){
				  for (var i = 0; i < res.data.data.length; i ++){
					  let item = res.data.data[i];
					  let shopItem = {label:item.shopName , value:item.id }
					  this.options1.push(shopItem);
				  }
			  }
	      }else{
	      
	      }
	  
	  });
  }
  //下级代理订单
  subsetProxyOrderList(sort:string){
	  uni.showLoading({
	  	title: '加载中'
	  });
	  let params = {
	    sortord:sort,      //查询条件-排序类型（orderCountDesc 订单数量倒序，orderCountAsc 订单数量正序）
	    userId:uni.getStorageSync("userId") == ""? "": parseInt(uni.getStorageSync("userId")),
	  };
	  
	  subsetProxyOrderList(params).then((res: any) => {
	      if(res.data.code==200){
			  if(this.lowerLevelLists.length>0){
				  this.lowerLevelLists = [];
			  }
			  this.lowerLevelLists = res.data.data
			  uni.hideLoading();
	      }else{
			  uni.hideLoading();
			  uni.showToast({
				title: '数据加载失败',
				icon: 'none',
				duration: 2000
			  });
	      }
	  
	  });
	  
  }
  //拉取网络数据
  orderListData(shopId:any,posTypeId:any,key:any,page:any){
  	  uni.showLoading({
  	  	title: '加载中'
  	  });
  	  let params = {
		keyWord:key,     //搜索关键字
  	    orderStatus: "ing",   //查询条件 - 订单状态 timeout：超时  end：完结   ing：租赁中
  	    pageNo: page,
  		pageSize: 10,
  		posTypeId:posTypeId == ""? "": parseInt(posTypeId), //机型id
  		shopId:shopId == ""? "": parseInt(shopId), //商户id
  		userId:uni.getStorageSync("userId") == ""? "": parseInt(uni.getStorageSync("userId")),
  	  };
  	  userOrderListRenting(params).then((res: any) => {
  	    console.log('++++++++++++++++++++本人' + JSON.stringify(res.data) )
  	      if(res.data.code==200){
			  var boolee = res.data.hasNext == false && this.continueTypes == false;
			  if (res.data.hasNext == true) {
			    this.status = "more";
			  } else {
			    this.status = "noMore";
			  }
			  console.log(res.data.hasNext, this.continueTypes, boolee);
			  if (res.data.isFirst || !boolee) {
			  				
					if (res.data.hasNext == false) {
					  this.continueTypes = false;
					}
					
					if(this.repairLists.length>0 && this.pageN==1){//搜索  删除已有数据
					  this.repairLists = [];
					}
					this.repairLists = this.repairLists.concat(res.data.data)
					// this.repairLists = res.data.data
					uni.hideLoading();
			  }
  	      }else{
			  uni.hideLoading();
			  uni.showToast({
				title: '数据加载失败',
				icon: 'none',
				duration: 2000
			  });
			  
  	      }
  	  });
  }

    orderDetailedM(id:any){
        uni.navigateTo({
        url: '../order/orderDetaileding?orderId='+id
    });
  }

  goBackM(){
	  uni.navigateBack({
	     delta: 1,
	  });
  }

  busM() {
    //方法中获取this
	this.subsetProxyOrderList('orderCountAsc');
    this.selectIfy = 2;
	uni.setStorage({
		 key: "rentingTab",
		 data: this.selectIfy,
		 success: function () {
		 },
	});
	
  }
  pucM() {
	this.orderListData(this.xshopId,this.xposTypeId,this.keywordOrder,this.pageN);
    this.selectIfy = 1;
	uni.setStorage({
		 key: "rentingTab",
		 data: this.selectIfy,
		 success: function () {
		 },
	});
	
  }
}
</script>

<style  lang="scss"  scoped>
.searchPP {
  background-color: white;
  padding: 0.5rem;

  display: flex;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
}
.searchP {
  background-color: white;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.repairLists-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.5rem;
  border-bottom: 1px solid #e8e8e8;
}

.classesifyP {
  text-align: center;
  display: flex;
  justify-content: center;
  padding: 1rem;
  background-color: white;
}

.classesify {
  width: 4rem;
  height: 1.5rem;
  border: 1px solid #02af74;

  display: flex;
  align-items: center;
  border-radius: 10px;
  /* //   background-color: red; */
}

.classesify-puc {
  width: 50%;
  font-size: 0.6rem;
  border-bottom-left-radius: 8px;
  border-top-left-radius: 8px;
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #02af74;
}
.classesify-pucs {
  width: 50%;
  font-size: 0.6rem;
  border-bottom-left-radius: 8px;
  border-top-left-radius: 8px;
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
}

.classesify-bus {
  width: 50%;
  font-size: 0.6rem;
}
.classesify-buss {
  width: 50%;
  font-size: 0.6rem;
  border-bottom-right-radius: 8px;
  border-top-right-radius: 8px;
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #02af74;
}

.totle-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f3f5f7;
  padding: 0.2rem 0.5rem;
}
.totle-price-text {
  font-size: 0.73rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #000000;
}
.totle-price-text span {
  font-size: 0.73rem;
  font-family: PingFang SC;
  font-weight: 300;
  color: #000000;
}

.repairLists {
  background-color: white;
  margin-bottom: 1rem;
  border-radius: 0.2rem;
  /* padding: 1rem; */
  /* margin: 1rem; */
}

.repairLists-child {
  border-bottom: 1px solid #e5e5e5;
}
.repairLists-head {
  padding: 1rem;
}

.repairBtn {
  width: 4.5rem;
  height: 1.5rem;
  background: #ffffff;
  border: 1px solid #02af74;
  border-radius: 0.3rem;
  font-size: 0.78rem;
  font-family: PingFang SC;
  font-weight: 300;
  color: #02b074;
  text-align: center;
  align-items: center;
  line-height: 1.5rem;
}
</style>
